<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>ko-easyui doc | SASS styles </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    


    <!-- stylesheets -->
    <link rel="stylesheet" href="/koeasyui/style/doc.css">

    <!-- favicon -->
    <link rel="icon" href="/koeasyui/images/favicon.ico">

    

  </head>
  <body>

   <script>window.__INITIAL_STATE__ = {"page":{"title":"SASS styles","path":"usage-and-configuration/sass-styles.html","support":{"link_url":"https://gitee.com/ko-plugins/koeasyui/issues","link_text":"ko-easyui","text":"Didn't you find what are you looking for? <br /> Try searching again on the left menu or","navigation":true,"navigation_label":"SUPPORT AND badmati"}},"data":{"navigation":{"logo":{"text":"ko-easyui doc","type":"link","path":"index.html"},"main":[{"text":"概述","type":"link","path":"index.html"},{"text":"快速上手","type":"link","path":"get-started.html"}]}},"config":{"timezone":"UTC","root":"/koeasyui/","time_format":"HH:mm:ss","theme":"../node_modules/hexo-theme-doc","theme_config":{"swagger_ui":{"version":2,"permalinks":true,"api_explorer":true,"download":"Download specification","show_extensions":false,"deep_linking":true,"display_operation_id":false,"doc_expansion":"none"},"search":{"skip":false,"background":false,"route":"/lunr.json"},"favicon":"/images/favicon.ico","google_analytics":"UA-110411486-1","support":{"link_url":"https://gitee.com/ko-plugins/koeasyui/issues","link_text":"ko-easyui","text":"Didn't you find what are you looking for? <br /> Try searching again on the left menu or","navigation":true,"navigation_label":"SUPPORT AND badmati"}}}}</script>

    <div id="react-navigation-root"><div class="doc-navigation" data-reactroot=""><nav class="doc-navbar"><a href="/koeasyui/index.html" class="doc-navbar__logo"><img src="/koeasyui/images/logo.png" class="doc-navbar__logo__img"/><span class="doc-navbar__logo__text">ko-easyui doc</span></a><i class="dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close doc-navbar__sidebar-close doc-navbar__sidebar-close--desktop"></i><i class="dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle doc-navbar__sidebar-toggle"></i></nav><nav class="doc-sidebar"><div class="doc-sidebar__vertical-menu"><i class="dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle doc-sidebar-toggle--primary doc-sidebar__vertical-menu__item"></i><i class="dc-icon dc-icon--search dc-icon--interactive doc-sidebar__vertical-menu__item doc-sidebar__vertical-menu__item--primary"></i></div><div class="doc-sidebar-content"><div class="doc-sidebar__search-form"></div><ul class="doc-sidebar-list"><li class="doc-sidebar-list__item doc-sidebar-list__item--label"><span class="">SUPPORT AND badmati</span></li><li class="doc-sidebar-list__item doc-sidebar-list__item--link"><a class="" href="https://gitee.com/ko-plugins/koeasyui/issues" target="_blank"><span>ko-easyui</span></a></li></ul></div></nav></div></div>
    <div class="doc-content">
  <div class="dc-page">
    <div class="dc-card">
      <div id="react-search-results-root"></div>
      <div id="page-content" class="doc-formatting">
        <h1 id="SASS-styles"><a href="#SASS-styles" class="headerlink" title="SASS styles"></a>SASS styles</h1><p>We used <a href="http://sass-lang.com/" target="_blank" rel="noopener">SASS</a> to write styles for the theme.
This can be helpful when style customization is required.</p>
<h2 id="How-To-Customize-Styles-with-SASS"><a href="#How-To-Customize-Styles-with-SASS" class="headerlink" title="How To Customize Styles with SASS"></a>How To Customize Styles with SASS</h2><p>Install <code>hexo-renderer-sass</code> in your project:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-renderer-sass --save</span><br></pre></td></tr></table></figure>
<p>Update your configuration and add:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">node_sass:</span></span><br><span class="line"><span class="attr">  includePaths:</span></span><br><span class="line"><span class="bullet">   -</span> <span class="string">node_modules</span></span><br></pre></td></tr></table></figure>
<p>Create a file as the entry point for your custom styles at <code>source/style/doc.scss</code> in your project dir and import the theme core styles:</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">import</span> <span class="string">"hexo-theme-doc/_doc.scss"</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>The entry point location <strong>must be</strong> <code>source/styles/doc.scss</code> so that it will override the css pre-compiled version that theme tries to include by default.</p>
</blockquote>
<p>To <strong>override variables</strong> you should declare them before including theme core styles, example:</p>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="variable">$doc-color-primary</span>: red; <span class="comment">// set primary color to "red"</span></span><br><span class="line"></span><br><span class="line">@<span class="keyword">import</span> <span class="string">"hexo-theme-doc/_doc.scss"</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>To see the list of available variables, have a look to <code>hexo-theme-doc/source/style/_doc/vars.scss</code> file.</p>
</blockquote>

        <div id="react-support-footer-root"></div>
      </div>
    </div>
  </div>
</div>


    

    <!-- js vendors -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lunr.js/2.1.0/lunr.min.js"></script>

    <!-- js source  -->
    <script src="/koeasyui/script/doc.js"></script>

    

  </body>
</html>
